react-remove-scroll

What is react-remove-scroll?

The react-remove-scroll package is designed to remove scrolling from a webpage or a part of it, typically used in modals or popups to prevent background scroll. It provides a way to lock the scroll without affecting the layout with scrollbars disappearing.

What are react-remove-scroll's main functionalities?

Remove scroll from the entire page

This feature allows you to wrap your component with the RemoveScroll component to prevent the entire page from scrolling when the component is mounted.

{"import { RemoveScroll } from 'react-remove-scroll';\n\nconst App = () => (\n  <RemoveScroll>\n    <div>Your content here</div>\n  </RemoveScroll>\n);"}

Remove scroll from a part of the page

This feature is used to remove scrolling from a specific part of the page, such as a modal or a popup, while keeping the rest of the page scrollable.

{"import { RemoveScroll } from 'react-remove-scroll';\n\nconst Modal = () => (\n  <RemoveScroll enabled={true}>\n    <div>Your modal content here</div>\n  </RemoveScroll>\n);"}

Control scroll removal dynamically

This feature allows you to dynamically enable or disable the scroll removal by changing the 'enabled' prop on the RemoveScroll component.

{"import { RemoveScroll } from 'react-remove-scroll';\nimport { useState } from 'react';\n\nconst ToggleScroll = () => {\n  const [scrollEnabled, setScrollEnabled] = useState(true);\n  return (\n    <div>\n      <button onClick={() => setScrollEnabled(!scrollEnabled)}>Toggle Scroll</button>\n      <RemoveScroll enabled={!scrollEnabled}>\n        <div>Your content here</div>\n      </RemoveScroll>\n    </div>\n  );\n};"}

Other packages similar to react-remove-scroll

body-scroll-lock

The body-scroll-lock package is similar to react-remove-scroll in that it prevents scrolling on the body element. It provides functions to disable and enable body scroll which can be useful for modals. It differs in its API, as it is not a React component but rather a set of utility functions.

react-scrolllock

react-scrolllock is another package that provides scroll locking capabilities. It is similar to react-remove-scroll but offers a different API. Instead of a component that wraps the content, it provides a ScrollLock component that can be placed anywhere in the component tree to prevent scrolling.

README

React-remove-📜

dont even scroll

react-remove-scroll

Disables scroll outside of children node.

• 🖱 mouse and touch devices friendly
• 📈 vertical and horizontal
• 📜 removes document scroll bar maintaining it space
• ✅ support nested scrollable elements
• 🕳 supports react-portals (uses React Event system)
• ☠️ it could block literally any scroll anywhere

Usage

Just wrap content, which should be scrollable, and everything else would not.

import {RemoveScroll} from 'react-remove-scroll';

<RemoveScroll>
  Only this content would be scrollable
</RemoveScroll>  

RemoveScroll accept following props

• children
• [enabled] - activate or deactivate component behaviour without removing it.
• [allowPinchZoom=false] - enabled "pinch-n-zoom" behavior. By default it might be prevented. However - pinch and zoom might break "scroll isolation", and disabled by default.
• [noIsolation=false] - disables outer event capturing. Event capturing is React friendly and unlikely be a problem. But if you are using shadowbox of some sort - you dont need it.
• [inert=false] - ☠️(be careful) disables events the rest of page completely using pointer-events except the Lock(+shards). React portals not friendly, might lead to production issues. Enable only for rare cases, when you have to disable scrollbars somewhere on the page(except body, Lock and shards).
• [forwardProps] - will forward all props to the children
• [className] - className for an internal div
• [removeScrollBar] - to control scroll bar removal. Set to false, if you prefer to keep it (wheel and touch scroll is still disabled).

Size

• (🧩 full) 1.7kb after compression (excluding tslib).

---

• (👁 UI) 400b, visual elements only
• (🚗 sidecar) 1.5kb, side effects

import {sidecar} from "react-remove-scroll";
import {RemoveScroll} from 'react-remove-scroll/UI';

const sidecar = sidecar(() => import('react-remove-scroll/sidecar'));

<RemoveScroll sideCar={sidecar}>
  Will load logic from a sidecar when needed
</RemoveScroll>  

Consider setting -webkit-overflow-scrolling: touch; on a document level for a proper mobile experience.

Internal div

But default RemoveScroll will create a div to handle and capture events. You may specify className for it, if you need, or remove it.

The following code samples will produce the same output

<RemoveScroll className="scroll">
  Only this content would be scrollable
</RemoveScroll>

<RemoveScroll forwardProps>
  <div className="scroll"> //RemoveScroll will inject props to this div
    Only this content would be scrollable
  </div>
</RemoveScroll> 

Pick the first one if you don't need a second.

Position:fixed elements

To properly size these elements please add a special className to them.

import {RemoveScroll} from 'react-remove-scroll';

// to make "width: 100%"
<div className={cx(classWithPositionFixed, RemoveScroll.classNames.fullWidth)} />

// to make "right:0"
<div className={cx(classWithPositionFixed, RemoveScroll.classNames.zeroRight)} />

See react-remove-scroll-bar documentation for details.

More than one lock

When stacked more is active (default) only one (last) component would be active.

Over isolation

That could happen - you disable scroll on the body, you are suppressing all scroll and wheel events, and you are ghosting the rest of the page by the inert prop.

Only something inside Lock does exists for the browser, and that might be less than you expected.

Dont forget about shard, dont forget - inert is not portals friendly, dont forget - you dont need over isolation in most of the cases.

just be careful!

Performance

To do the job this library setup non passive event listener. Chrome dev tools would complain about it, as a performance no-op.

We have to use synchronous scroll/touch handler, and it may affect scrolling performance.

Consider using noIsolation mode, if you have large scrollable areas.

Supported React versions

• v1 supports React 15/16
• v2 requires 16.8.0+ (hooks)

Scroll-Locky

This is a refactoring of another library - react-scroll-locky - to make package smaller and more react-portals friendly.

See also

• react-focus-on - Finite Modal creator (uses Scroll-Locky) underneath.
• react-locky - React event canceler
• react-scrolllock - React scroll lock
• scroll-lock - DOM scroll lock
• body-scroll-lock - DOM scroll lock

This package is relative smaller(1), more react friendly(2), works with non zero body margins(3), and has a better "overscroll" management.

License

MIT

Changelog

2.5.10 (2024-05-12)

Bug Fixes

• correct behavior in shadow dom (ea7a398)
• elementCanBeScrolled fails if node is not an HTMLElement (baa56c3)